#root{
	height: 100%;
	overflow: auto;
}
#chat_root_container {
	height: 100%;
	min-height: var(--chat-default-height);
	width: 100%;
	min-width: var(--chat-default-width);
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}
#chat_base_container {
	box-shadow: var(--shadow-plus);
	width: var(--chat-default-width);
	height: var(--chat-default-height);
	border-radius: var(--border-radius-mini);
	background-color: var(--backgroud-default-color);
	overflow: hidden;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
}
#left_menu {
	width: var(--menu-default-width);
	background-color: var(--menu-default-background-color);
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	.user_avatar{
		padding: 32px 0 8px 0;
	}
	.tab_switch{
		display: flex;
		flex-direction: column;
		padding: 12px 0;
		width: 100%;
		.left_menu_tab_item{
			width: 100%;
			height: 60px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			img {
				height: 24px;
				padding-bottom: 2px;
			}
			span {
				color: var(--text-secondary-color);
				font-size: var(--font-small-size);
				line-height: var(--font-default-line-height);
			}
			&.active {
				span {
					color: var(--text-active-color);
				}
			}
		}
	}
}
#chat_outer{
	flex: 1;
	overflow: hidden;
	&>div{
		display: none;
		&.active {
			display: block;
		}
	}
}
#chat_main {
	width: 100%;
	height: 100%;
	overflow: hidden;
	#chat_main_container{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
	}
	#chat_list {
		flex-shrink: 0;
		width: 250px;
		height: 100%;
		background: #FFFFFF;
		box-shadow: inset -1px 0 0 0 #F0F0F0;
	}
	#message_main {
		flex: 1;
		background: #FAFBFC;
	}
	.search_global{
		height: var(--header-default-height, 60px);
	}
}
#chat_list {
	display: flex;
	flex-direction: column;
	.search_header{
		flex-shrink: 0;
		padding: 0 16px;
		display: flex;
		align-items: center;
	}
	.list_container{
		flex: 1;
		overflow: auto;
	}
}
#message_container{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}
#message_editor_container{
	height: 164px;
	flex-shrink: 0;
	width: 100%;
	box-shadow: inset 0 1px 0 0 var(--border-default-color);
	display: flex;
	flex-direction: column;
	.tool_bar{
		flex-shrink: 0;
	}
	.editor_component {
		flex: 1;
	}
}
#message_list_container {
	flex: 1;
	height: 0;
}
#message_outer_container{
	width: 100%;
	height: 100%;
}
